<template>
  <div>
    <el-select v-model="projectId" placeholder="请选择项目" @change="getData">
      <el-option
        v-for="item in projectList"
        :key="item.projectId"
        :label="item.projectName"
        :value="item.projectId"
      ></el-option>
    </el-select>
    <div ref="main" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from 'echarts';
import {listPaymentStatistics} from "@/api/prodata/paymentStatistics";
import {listProject} from "@/api/project/project";

export default {
  name: "index",
  data() {
    return {
      projectId: 1,
      projectList: [],
      //图表容器对象
      myChart: null,
      //图表各项属性
      option: null
    }
  },
  mounted() {
    //1, 初始化图表容器
    this.myChart = echarts.init(this.$refs.main);

    //2, 图表各项属性
    this.option = {
      // 标题
      title: {
        text: '进度付款支付情况',
        left: 'center'
      },
      // 提示信息
      tooltip: {
      },
      // 工具箱
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      // x轴
      xAxis: {
        name: '承包商',
        type: 'category',
        data: []
      },
      // y轴
      yAxis: {
        name: '百分比',
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value}%' // 在数值后添加百分号
        }
      },
      // 图表系列
      series: [{
        data: [],
        type: 'bar',
        label:{
          show: true,
        }
      }],
      label: { // 添加标签配置，显示打款金额
        show: true,
        position: 'top',
        color: '#333',
        fontSize: 12
      }
    };

    //配置项
    this.myChart.setOption(this.option);
    this.getData();
  },
  created() {
    this.getProjectList();
  },
  methods: {
    /** 查询项目列表 */
    getProjectList() {
      listProject().then(resp => {
        this.projectList = resp.rows;
      })
    },
    getData() {
      // 获取数据:计算付款百分比
      listPaymentStatistics( { projectId: this.projectId }).then((r) => {
        console.log(r)
        this.option.xAxis.data = r.data.nameList;
        this.option.series[0].data = r.data.payPercentList;
        this.option.tooltip.formatter = function(params) {
          return '已付款' + params.value + '%';
        }
        this.option.label.formatter = function(params) {
          let paymentAmounts = r.data.payList;
          // params.dataIndex为当前柱子的索引
          let paymentAmount = paymentAmounts[params.dataIndex];
          let formattedValue = paymentAmount.toLocaleString('en-US', {
            // 最小精度
            minimumFractionDigits: 2,
            // 最大精度
            maximumFractionDigits: 2
          });

          // 定义单位转换
          const units = ['元', '万', '亿'];
          let unitIndex = 0; // 单位索引，默认为0
          // 数据大于一万且单位索引不会超过单位数组
          while (paymentAmount >= 10000 && unitIndex < units.length - 1) {
            // 每4个0变一次单位
            paymentAmount /= 10000;
            unitIndex++;
          }

          // 根据单位调整格式化后的数值，去除不需要的尾随零和小数点
          if (unitIndex > 0) {
            formattedValue = paymentAmount.toLocaleString('en-US', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2
            }).replace(/\.0+$/, ''); // 移除小数点后多余的零
            if (formattedValue.endsWith('.')) {
              formattedValue = formattedValue.slice(0, -1); // 如果小数点是最后一个字符，则移除它
            }
          }
          return `${formattedValue}${units[unitIndex] || ''}`;
        }
        this.myChart.setOption(this.option);
      }).catch(() => {})
    },
    formatCurrencyWithUnit(value) {
      let valueFloat = parseFloat(value);
      let formattedValue = valueFloat.toLocaleString('en-US', {
        // 最小精度
        minimumFractionDigits: 2,
        // 最大精度
        maximumFractionDigits: 2
      });

      // 定义单位转换
      const units = ['元', '万', '亿'];
      let unitIndex = 0; // 单位索引，默认为0
      // 数据大于一万且单位索引不会超过单位数组
      while (valueFloat >= 10000 && unitIndex < units.length - 1) {
        // 每4个0变一次单位
        valueFloat /= 10000;
        unitIndex++;
      }

      // 根据单位调整格式化后的数值，去除不需要的尾随零和小数点
      if (unitIndex > 0) {
        formattedValue = valueFloat.toLocaleString('en-US', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).replace(/\.0+$/, ''); // 移除小数点后多余的零
        if (formattedValue.endsWith('.')) {
          formattedValue = formattedValue.slice(0, -1); // 如果小数点是最后一个字符，则移除它
        }
      }
      return `${formattedValue}${units[unitIndex] || ''}`;
    }
  }
}
</script>

<style scoped>

</style>
